<!DOCTYPE html>
<html>
<head>
    <script src="../HtmlRunning/build/react.js"></script>
    <script src="../HtmlRunning/build/react-dom.js"></script>
    <script src="../HtmlRunning/build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">

    function Sidebar(props) {

        return (<ul>
            {props.posts.map((post) =>
                    <li key={post.id}>
                        {post.title}
                    </li>
            )}
        </ul>);
    }

    function Content(props) {
        return (
            <div>
                {
                    props.posts.map((post) =>
                            <div key={post.id}>
                                <h3>{post.title}</h3>
                                <p>{post.content}</p>
                            </div>)
                }
            </div>

        );
    }

    function Blog(props) {

        return (
                <div>
                    <Sidebar posts={props.posts}/>
                    <hr />
                    <Content posts={props.posts}/>
                </div>
        );
    }

    const posts = [
        {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
        {id: 2, title: 'Installation', content: 'You can install React from npm.'}
    ];

    ReactDOM.render(
            <Blog posts={posts} />,
        document.getElementById('example')
    );

</script>
</body>
</html>

